/**
 * Created by luojie on 2018/3/12.
 */
// import '../utils/jQueryRotate.2.2.js'
// import '../utils/jquery.easing.min.js'
import '../css/base.scss'
import '../css/luckDraw.scss'
import chou from '../images/chou.png'
import chouOne from '../images/pic3.png'
import chouTwo from '../images/pic2.png'
import Modal from '../components/modal'
import Layout from '../components/layout'

const openid = "olsJCwx-pWEkoeIn9Hk4dD8J6SnE";
// const openid = getCookie("openid");

const msgArr = ["没有抽奖次数了"];
// import chou from '~/images/chou.png'
export default class LuckDraw extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            DrawLists: [
                {
                    text: '随机优惠券：50、80、200、500、800（元）'
                },
                {
                    text: '精美小礼品（豪华文具礼盒、小猪佩奇套装、尤克里里)'
                },
                {
                    text: '青铜考古研学夏令营活动（价值349元）'
                },
                {
                    text: '晔华眼科3次视力矫正（价值3000元）'
                },
                {
                    text: '上海迪士尼梦幻之旅（价值8999元）'
                }
            ],
            isShow: false,
            giftInof: {
                total: 0,
                status: 0,
            },
            total: null,
            num: 0,
            sign: null
        };
        this.handleClick = this.handleClick.bind(this);
        this.isEmpty = false;

        this.times = 0;
        this.onOff = true
    }
    componentDidMount() {
        // test()
        // function test(){
        //     console.log(1111)
        // }
        // test()
        // var test = new Function(console.log(2222))
        // test()
        // var test = function(){
        //     console.log(333)
        // }
        // test()
        // var test = new Function(console.log(444))
        // test()
        // function test(){
        //     console.log(5555)
        // }
        this.handleClick();
        this.getNumTwo();
        // var h = this.refs.luckDraw.offsetHeight
        // if (document.documentElement.clientHeight > this.refs.luckDraw.offsetHeight) {
        //     this.refs.luckDraw.style.height = document.documentElement.clientHeight + 'px'
        // } else {
        //     // this.refs.luckDraw.style.position = 'fixed'
        //     // this.refs.luckDraw.style.left = '0'
        //     // this.refs.luckDraw.style.right = '0'
        //     // this.refs.luckDraw.style.bottom = '0'
        //     // this.refs.luckDraw.style.top = '0'
        //     this.refs.luckDraw.style.height = h + 'px'
        // }
    }
    hanldeSure() {
        this.closeModal()
        this.getNumTwo()
    }
    //关闭弹出框
    closeModal() {
        let { isShow } = this.state
        this.setState({
            isShow: false
        }, () => {
            this.getNumTwo()
            this.onOff = true
        })
    }
    //获取抽奖次数
    getNumTwo() {
        let { giftInof, sign } = this.state
        ajax('/twowin/getTimes', {
            openid,
        }, 'post').then(res => {
            if (res.status === 1) {
                this.times = res.datas;
                this.setState({
                    num: res.datas,
                    // sign: res.datas === 0 ? 1 : null
                })
            }

        })
    }
    //抽奖
    getNum() {
        let { giftInof, sign } = this.state;
        ajax('/twowin/start', {
            openid,
        }, 'post').then(res => {
            this.rotateFunc(res.datas.id,
                res.status === 1 ? (-60 * parseInt(res.datas.type) - 30) : -30,
                res.status === 1 ? res.datas.name : res.msg,
                () => {
                    this.times = res.total;
                    this.setState({
                        giftInof: res,
                        // num: res.total,
                        isShow: true,
                        sign: res.total === 0 ? 1 : null
                    });
                    this.onOff = true
                })
        }).catch((err) => {
            console.log(err)
        })
        // }

    }
    //转动
    rotateFunc(awards, angle, text, fn) {  //awards:奖项，angle:奖项对应的角度

        $('.rotate-bg').stopRotate();

        $('.rotate-bg').rotate({

            angle: 0,

            duration: 5000,

            animateTo: angle + 1440, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^

            callback: function () {
                fn && fn()
            }

        });

    }
    //点击转动
    handleClick() {
        let _this = this;
        let { giftInof, isShow } = this.state
        $("#lotteryBtn").rotate({
            bind:

                {

                    click: function (e) {
                        e.preventDefault();
                        if (_this.onOff) {
                            _this.onOff = false
                            ajax('/twowin/getTimes', {
                                openid,
                            }, 'post').then(res => {
                                // if (res.status === 1) {
                                    if (res.datas > 0) {
                                        $('.rotate-bg').rotate({

                                            angle: 0,

                                            duration: 5000,

                                            animateTo: 4320, //angle是图片上各奖项对应的角度，1440是我要让指针旋转4圈。所以最后的结束的角度就是这样子^^

                                            callback: function () {

                                            }

                                        });
                                        _this.getNum()
                                        _this.setState({
                                            num: res.datas,
                                        });
                                    } else {
                                        _this.onOff = true
                                        delete giftInof.datas
                                        _this.setState({
                                            isShow: true,
                                            num: 0,
                                            giftInof
                                            // msg:msgArr[0],
                                            // isSuccess:false,
                                        })
                                    }
                                // }

                            })
                        }
                    }

                }



        });
    }
    modalRender() {
        const { DrawLists, isShow, giftInof, num, sign } = this.state
        let dom = "";
        if (num > 0) {
            if (giftInof.status === 1) {
                dom = <div>
                    <div className="no_chance">
                        中奖啦!
                        </div>
                    <div className="luck">
                        {giftInof.datas && giftInof.datas.name || ''}
                    </div>
                </div>
            } else if (giftInof.status === 0) {

                dom = <div>
                    <div className="no_chance">
                        很遗憾
                        </div>
                    <div className="add_chance">
                        你什么也没中
                        </div>
                </div>

            }
        } else {
            // if (!sign) {
            dom = <div>
                <div className="no_chance">
                    没有抽奖次数了!
                </div>
                <div className="add_chance">
                    快去增加抽奖次数吧!
                </div>
            </div>
            // }
        }
        return dom
    }
    render() {
        const { DrawLists, isShow, giftInof, num } = this.state
        return (
            <Layout {...this.props} active={'prize'} noBg={true}>
                <div className="luckDraw" ref='luckDraw'>
                    <div className="bg_top">
                    </div>
                    <div className="content">
                        <div className="ly-plate">
                            <div className="rotate-bg">
                            </div>
                            <div className="lottery-star">
                                <img src={chou} id="lotteryBtn" />
                            </div>
                        </div>
                        <div className="last_chance">
                            还剩<span>{num || 0}</span>次抽奖机会
                        </div>
                        <div className="DrawLists">
                            {
                                DrawLists.map((item, index) => {
                                    return (
                                        <div key={index} className="DrawList">
                                            {index + 1}<span>:</span>{item.text}
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className="watch_more" onClick={() => {
                            this.props.history.push('/detail')
                        }}>
                            查看详情规则>
                        </div>
                    </div>
                    <div className="bg_bot"></div>
                    <Modal
                        isShow={isShow}
                        closeModal={this.closeModal.bind(this)}
                        hasBgImg={
                            giftInof.datas ? (giftInof.status === 1 ? chouOne : chouTwo) : null
                        }
                    >
                        {
                            this.modalRender()

                        }
                        <div className="sure_btn"
                            onClick={this.hanldeSure.bind(this)}
                        >
                            确定
                        </div>
                    </Modal>
                </div>
            </Layout>
        )
    }
}